require('./PageNoticedetail.styl');
import { Group, TextField, TextareaField, Boxs, Field, NavBar, Context, List } from 'saltui';
import Icon from 'salt-icon';
import { Control } from 'react-keeper';

const reactMixin = require('react-mixin');
const Actions = require('./actions');
const Store = require('./store');
const { HBox, Box, VBox } = Boxs;
const Replylist = require('components/replylist');
const TreplyItem = require('components/trelplyitem');
class Noticedetail extends React.Component {

    constructor(props) {
        super(props);
        this.state = {
            isreceived: Control.state.data.isreceived,
            title: '',
            textareaContent: '',
            sender: '',
            senderData: '',
            noticeRang: 0,
            fileList: [],
            readedUserCount: '',
            sentUserCount: '',
            replayFlag: '0',
            replayList: [],//与多个人回复信息列表
            active: false,
            labelText: ''
        };
        this.handleClick = this.handleClick.bind(this);
        this.handleClickShowMember = this.handleClickShowMember.bind(this);
        this.handleOnLeftClick = this.handleOnLeftClick.bind(this)
        this.handleOnRightClick = this.handleOnRightClick.bind(this);
    }
    handleTextChange(name, newValue) {
        this.setState({
            [name]: newValue,
        });
    }
    //文件点击
    handleClick() {
        dd.biz.util.openLink({
            url: this.state.fileList[0].imgUrl,//要打开链接的地址
            onSuccess: function (result) {
            },
            onFail: function (err) { }
        })
    }
    handleClickShowMember() {
        let schoolId = Control.state.data.schoolId;
        let noticeId = Control.state.data.noticeId;

        Control.go("/home/notice/shownoticemember", {
            data: {
                schoolId,
                noticeId
            }
        })
    }
    handleOnLeftClick() {
        Control.go(-1);
    }
    //右侧导航按钮
    handleOnRightClick() {
        this.setState({ active: true })
    }
    handleReply(text) {
        if (text) {
            let cb = () => {
                Actions.teachGetReplayList(Control.state.data);//已接收
            }
            Actions.teachReplyMsg({ data: Control.state.data, content: text },cb)
        }
    }
    render() {
        let t = this;
        return (
            <div className="noticedetail">
                <NavBar
                    isShow={false}
                    onLeftClick={this.handleOnLeftClick}
                    onRightClick={this.handleOnRightClick}
                    rightText={this.state.replayFlag == 1 ? '回复' : ''}
                    title="通知详情"
                />
                {/* 通知详情 */}
                <Group >
                    <Group.List >
                        <TextField
                            label={`【${this.state.labelText}】`}
                            placeholder=""
                            value={t.state.title}
                            tip=""
                            readOnly={true}
                            rightText=''
                            onChange={Context.noop}
                            className="title"
                        />
                    </Group.List>
                    <Group.List>
                        <TextareaField
                            layout="h"
                            label=""
                            minRows={2}
                            readOnly={true}
                            maxRows={5}
                            placeholder=""
                            value={t.state.textareaContent}
                            tip={null}
                            onChange={Context.noop}
                        />
                        <VBox hAlign="end" className="tip t-PR10">
                            <Box>
                                <HBox vAlign="center">
                                    <Box className="t-MR8"><Icon name="user" width="14px" fill="#999" /></Box>
                                    <Box>{this.state.sender}</Box>
                                </HBox>
                            </Box>
                            <Box className="t-MT10 t-MB10">{this.state.senderData}</Box>
                        </VBox>
                    </Group.List>
                </Group >
                {/* 查看发布对象-已发送 */}
                {!this.state.isreceived ?
                    <Group className="t-MT10">
                        <div onClick={this.handleClickShowMember}>
                            <Group.List >
                                <Field label="查看发布对象" icon={<Icon name="angle-right" />} tappable={true}>
                                    <div >已读(<span className="color">{this.state.readedUserCount}</span>/{this.state.sentUserCount}人)</div>
                                </Field>
                            </Group.List>
                        </div>
                    </Group> : null
                }
                {/* 文件显示 */}
                {
                    this.state.fileList && this.state.fileList.length > 0 &&
                    <List
                        layout="left"
                        hasRightIcon={true}
                        iconName='angle-right'
                        iconWidth={20}
                        isDelete={false}
                        onClick={this.handleClick}
                        data={this.state.fileList}
                        className="t-LH70 list-item-img"
                    />
                }
                {/* 老师端回复单个信息显示框已发送 */}
                {!this.state.isreceived && this.state.replayFlag == '1' && this.state.replayList.length > 1 &&
                    this.state.replayList.map((item, index) => {
                        return (
                            <TreplyItem
                                data={Control.state.data}
                                key={index}
                                {...item}
                            />
                        );
                    })
                }
                {/* 老师端回复单个信息显示框已接收 */}
                {/* 回复信息输入框 */}
                {this.state.isreceived &&
                    < Replylist
                        ref="replylist"
                        handleReply={this.handleReply}
                        active={this.state.active}
                    />
                }
                {this.state.isreceived && this.state.replayFlag == '1' && this.state.replayList.length > 1 &&
                    <List
                        layout="left"
                        hasRightIcon={false}
                        iconWidth={20}
                        isDelete={false}
                        onClick={this.handleClick}
                        data={this.state.replayList}
                        className="t-MT15"
                    />
                }
            </div>
        );
    }

    componentWillMount() {

    }

    componentDidMount() {
        let t = this;
        const cb = (replayFlag) => {
            !Control.state.data.isreceived && replayFlag == '1' && Actions.getReplayList(Control.state.data);//已发送
            Control.state.data.isreceived && replayFlag == '1' && Actions.teachGetReplayList(Control.state.data);//已接收
        }
        if (Control.state.data.isreceived) {
            Actions.fetch(Control.state.data, cb);
        } else {
            Actions.fetchSent(Control.state.data, cb);
        }
    }

    componentWillReceiveProps(nextProps) {
    }

    shouldComponentUpdate(nextProps, nextState) {
        return true;
    }

    componentWillUpdate(nextProps, nextState) {
    }

    componentDidUpdate(prevProps, prevState) {
    }

    componentWillUnmount() {
    }
}

reactMixin.onClass(Noticedetail, Reflux.connect(Store));

module.exports = Noticedetail;
